<script setup lang="ts">
import YkPagination from '@yk/components/pagination/YkPagination.vue'
import { Pages } from '@typings/pages'
import { ElForm } from 'element-plus'
import { editAlarmRulesConfigListByPageAPI, getAlarmRulesConfigListByPageAPI } from '@/api/alarm'
import { AlarmUserDeviceDTO, DeviceRoleAlarmDTO } from '@/api/entity/alarm'
import { MountedCheck } from '@/utils'
import YkEmptyBox from '@yk/components/empty-box/YkEmptyBox.vue'
import { EmptyEnum, EmptyState } from '@yk/components/empty-box/type'
import { ObjectUtil } from '@utils/object-util'

defineOptions({ name: 'AlarmReceiveConfig' })

const mc = new MountedCheck()
onMounted(async () => {
  searchHandle()
  mc.end()
})

onActivated(() => {
  if (mc.isMounted()) return
  getTableData()
})

// region TODO 查询
const searchParams = reactive({
  q: '',
  // 4-仅自己 3-与我分享
  type: null as number
})
function searchHandle () {
  pages.pageNum = 1
  getTableData()
}
// endregion

// region TODO 表格数据
const pages = reactive(new Pages())
type TableDataType = DeviceRoleAlarmDTO & { _informType: string[], _userInformType: string[] }
const tableData = ref<TableDataType[]>([])
const tableState = shallowRef<EmptyState>(EmptyEnum.NONE)
function getTableData () {
  const loading = ElLoading.service()
  getAlarmRulesConfigListByPageAPI({
    ...pages.getParams(),
    param: searchParams
  }).then((res) => {
    res.result().then((rdata) => {
      if (rdata.records.length) {
        tableData.value = rdata.records.map((item) => {
          const _item = item as TableDataType
          // 如果没有配置默认全选
          if (!_item.userAlarmId) item.userInformType = '0,1,2'

          _item._informType = item.informType ? item.informType.split(',') : []
          _item._userInformType = item.userInformType ? item.userInformType.split(',') : []
          return _item
        })
        tableState.value = EmptyEnum.SUCCESS
      } else {
        tableState.value = EmptyEnum.EMPTY
      }
      pages.total = rdata.total
    })
  }).finally(loading.close)
}
// endregion

// region TODO 保存
function updateAlarmConfig (item: TableDataType) {
  const _item = ObjectUtil.copy(item)
  const params = _item as AlarmUserDeviceDTO
  _item.informType = _item._userInformType.join(',')
  params.id = _item.userAlarmId
  editAlarmRulesConfigListByPageAPI(params).then((res) => {
    res.result().then(() => {
      ElMessage.success('保持成功')
      getTableData()
    })
  })
}
// endregion
</script>

<template>
  <div class="layout_view d-flex" style="min-height: 100%">
    <div class="c_card-page w-100">
      <div class="c_card_header c_card-title bor-divider-b">报警接收配置</div>
      <!--搜索表单-->
      <el-form inline class="c_form-search pt-16">
        <el-form-item label="触发器名称">
          <el-input v-model="searchParams.q" placeholder="输入触发器/设备名称搜索" />
        </el-form-item>
        <el-form-item>
          <el-select v-model="searchParams.type" placeholder="全部推送项" filterable clearable>
            <el-option value="">全部</el-option>
            <el-option :value="4" label="仅自己" />
            <el-option :value="3" label="与我分享" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchHandle">查询</el-button>
        </el-form-item>
      </el-form>
      <!--网格列表-->
      <yk-empty-box :state="tableState">
        <div style="min-height: 200px;" class="bor-p">
          <div class="d-grid grid-list" style="grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));grid-gap: 12px;">
            <div v-for="item in tableData" :key="item" class="bor-base p-12 fs-14 grid-list__item">
              <div class="d-flex-between-center">
                <div class="fs-16 label">{{ item.alarmName }}</div>
                <div><span>设备所有人：</span>{{ item.userName }}</div>
              </div>
              <div class="d-flex-between-center mt-2">
                <div><span>报警设备：</span>{{ item.deviceName }}</div>
                <div><span>报警变量：</span>{{ item.variableName }}</div>
              </div>
              <div class="d-flex-align-center mt-1">
                <div>报警推送项：</div>
                <el-checkbox-group v-model="item._informType" disabled>
                  <el-checkbox label="1">短信</el-checkbox>
                  <el-checkbox label="2">播报</el-checkbox>
                </el-checkbox-group>
              </div>
              <div class="d-flex-align-center">
                <div>报警接收项：</div>
                <el-checkbox-group v-model="item._userInformType">
                  <el-checkbox label="1">短信</el-checkbox>
                  <el-checkbox label="2">播报</el-checkbox>
                </el-checkbox-group>
              </div>
              <div class="d-flex-between-center mt-1">
                <div class="fs-12"><span>触发器创建时间：</span>{{ item.createdAt }}</div>
                <div>
                  <el-button size="small" type="primary" @click="updateAlarmConfig(item)">保存</el-button>
                </div>
              </div>
            </div>
          </div>
          <!--分页-->
          <el-affix target=".grid-list" position="bottom" :offset="0">
            <yk-pagination class="c_table-pagination-page" :pages="pages" @handle="getTableData" />
          </el-affix>
        </div>
      </yk-empty-box>
    </div>
  </div>
</template>

<style scoped lang="scss">
.grid-list {
  .grid-list__item {
    color: var(--el-text-color-regular);
    .label {
      color: var(--el-text-color-primary);
    }
  }
}
</style>
